<!--
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-08-05 14:52:16
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-08-09 10:41:42
 * @FilePath: \passiflora-edulis-sims\src\components\CreateBook\WordSearchSettingComponent.vue
 * @Description: Word Search 的属性设置
 *
 * Copyright (c) 2025 by '1214391613@qq.com', All Rights Reserved.
-->

<script setup lang="ts">
import type { IStrokePaint } from 'leafer-ui'
import { useGlobalOptionStore } from 'src/stores/global-option-store'
import { useWordSearchIStore } from 'src/stores/wordsearch-store'
import { reactive, watch } from 'vue'

// 初始化 word search store 的对象
const word_search_store = useWordSearchIStore()
const global_option_store = useGlobalOptionStore()
const text_aligns = ['left', 'center', 'right', 'justify', 'both']
const vertical_align = ['top', 'middle', 'bottom']

const description_checkboxs = reactive<Record<string, boolean>>({
  N: true,
  NE: true,
  E: true,
  SE: true,
  S: true,
  SW: true,
  W: true,
  NW: true,
})

// 监视 description_checkboxs 有改动更新进word search store
// eslint-disable-next-line @typescript-eslint/no-unused-vars
watch(description_checkboxs, (new_val, _) => {
  const lst = []
  for (const key in new_val) {
    if (description_checkboxs[key] == true) {
      lst.push(key)
    }
  }
  word_search_store.directions = lst
})

const col_token = 'col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-2'

// 答案呈现的样式
const gird_stroke_style = reactive({
  type: 'solid',
  color: '#000000',
  style: {
    strokeWidth: 1,
  },
})

// eslint-disable-next-line @typescript-eslint/no-unused-vars
watch(gird_stroke_style, (new_val, _) => {
  word_search_store.solution.stroke = new_val as IStrokePaint
})
</script>

<template>
  <div>
    <q-form>
      <div>
        <h5>单词提示</h5>
      </div>
      <div class="row">
        <div class="col-4 q-pb-sm q-pr-sm">
          <q-input
            outlined
            v-model="word_search_store.words_legend.text"
            label="单词提示标题"
            :input-style="{
              color: word_search_store.words_legend.font.font_color,
            }"
            ><template v-slot:append>
              <q-icon name="colorize" class="cursor-pointer">
                <q-popup-proxy
                  cover
                  transition-show="scale"
                  transition-hide="scale"
                >
                  <q-color
                    v-model="word_search_store.words_legend.font.font_color"
                  />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </div>
        <div class="col-4 q-pb-sm q-pr-sm">
          <q-select
            outlined
            v-model="word_search_store.words_legend.font.font_name"
            :options="global_option_store.font_names"
            label="字体"
          >
          </q-select>
        </div>
        <div class="col-4 q-pb-sm q-pr-sm">
          <q-input
            outlined
            type="number"
            v-model="word_search_store.words_legend.font.font_size"
            label="字号"
          >
          </q-input>
        </div>

        <div class="col-6 q-pb-sm q-pr-sm">
          <q-select
            outlined
            v-model="word_search_store.words_legend.text_align"
            :options="text_aligns"
            label="字体水平方向"
          >
          </q-select>
        </div>
        <div class="col-6 q-pb-sm q-pr-sm">
          <q-select
            outlined
            v-model="word_search_store.words_legend.vertical_align"
            :options="vertical_align"
            label="字体垂直方向"
          >
          </q-select>
        </div>
      </div>
      <q-separator spaced />
      <div>
        <h5>方向选择</h5>
      </div>
      <template v-for="(value, key) in description_checkboxs" :key="key">
        <q-checkbox v-model="description_checkboxs[key]" :label="key" />
      </template>
      <q-separator spaced />
      <div>
        <h5>解答方式</h5>
        <div class="row">
          <div :class="col_token" class="q-pb-sm q-pr-sm">
            <q-select
              outlined
              v-model="word_search_store.solution.category"
              :options="word_search_store.solution_categorys"
              label="显示方式"
            >
            </q-select>
          </div>
          <div :class="col_token" class="q-pb-sm q-pr-sm">
            <q-input
              v-model.number="gird_stroke_style.style.strokeWidth"
              label="方框厚度(px)"
              type="number"
              outlined
            />
          </div>
          <div :class="col_token" class="q-pb-sm q-pr-sm">
            <div
              class="row justify-between items-center"
              style="
                border: solid rgba(0, 0, 0, 0.24);
                border-radius: 5px;
                border-width: 1px;
                height: 100%;
              "
            >
              <div>
                <q-icon
                  name="check_box_outline_blank"
                  :style="{ color: gird_stroke_style.color }"
                  size="2rem"
                >
                </q-icon>
              </div>
              <div>
                <q-icon name="colorize" size="2rem">
                  <q-popup-proxy
                    cover
                    transition-show="scale"
                    transition-hide="scale"
                  >
                    <q-color v-model="gird_stroke_style.color" />
                  </q-popup-proxy>
                </q-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </q-form>
  </div>
</template>

<style scoped></style>
